import { Row, Col, Button, Tag, Image } from "antd";
import { useState, useEffect } from "react"
import { $http } from "../../api";
import moment from "moment"
import { annoTypes } from "../../utils";
import { baseURL } from "../../api/request";





function AnnoDetail({ history, location, match }) {
  const [data, setData] = useState(null)
  useEffect(() => {
    $http.getannodetail({
      _id: match.params.id
    })
      .then(res => {
        if (res.code == 200) {
          setData(res.result)
        }
      })
  }, [])
  return (
    <div>
      <h2> 公告详情</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={10} style={{ display: 'flex' }}>
          <Button type="primary" onClick={() => history.go(-1)}>返回</Button>
        </Col>
      </Row>

      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        {
          data && <div>
            <p>{data.title} -  {data.author}</p>
            <div style={{ padding: 10, border: "1px solid #999", borderRadius: 10, minHeight: 100, width: 200 }}>
              {data.content}
            </div>
            <div style={{ marginTop: 20 }}>
              <Tag color={annoTypes.find(v => v.value == data.type).color}>
                {annoTypes.find(v => v.value == data.type).text}
              </Tag>
              {
                moment(data.time).format('YYYY-MM-DD hh:mm:ss')
              }
            </div>
            <Image
              width={200}
              style={{ width: 180, height: 150, borderRadius: 10, marginTop: 20 }}
              src={data.desc.replace(/public/, baseURL)}
            />
          </div>
        }
      </Row>
    </div>
  )
}

export default AnnoDetail